<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane v-for="tab in tabList" :key="tab.id" :label="tab.name" :name="tab.id">
      <el-table :data="tab.tableData" stripe style="width: 100%" :show-header="false">
        <el-table-column type="index" :index="indexMethod" />
        <el-table-column width="100">
          <template #default="{ row }">
            <span v-if="row.imgUrl">
              <el-image
                style="width: 74px; height: 74px; border-radius: 8px"
                :src="row.imgUrl"
                fit="cover"
              ></el-image>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="songName" width="120" />
        <el-table-column width="450">
          <template #default="{ row }">
            <span style="margin-left: 5px" v-for="tag in row.tags" :key="tag">
              <el-tag type="success" effect="plain">{{ tag }}</el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="singer" />
        <el-table-column prop="album" align="center" />
        <el-table-column prop="duration" align="right" />
      </el-table>
    </el-tab-pane>
  </el-tabs>
  <!-- ---------- -->
</template>

<script setup>
import { ref } from 'vue'
const indexMethod = (index) => {
  if (index < 9) return '0' + (index + 1)
  return index
}

const tabList = ref([
  {
    name: '全部',
    id: 0,
    tableData: [
      {
        imgUrl: 'https://web-tilas4854.oss-cn-beijing.aliyuncs.com/ranking/8.png',
        songName: '青春为名',
        tags: ['Hi-Res'],
        singer: '李宇春',
        album: '青春为名 下部曲 - 泪',
        date: '2023-10-10',
        duration: '04:01'
      },
      {
        imgUrl: 'https://web-tilas4854.oss-cn-beijing.aliyuncs.com/ranking/1.png',
        songName: '还有我疼你',
        tags: ['Hi-Res'],
        singer: '陆虎',
        album: '还有我疼你',
        date: '2023-10-10',
        duration: '03:51'
      },
      {
        imgUrl: 'https://web-tilas4854.oss-cn-beijing.aliyuncs.com/ranking/5.png',
        songName: '天空之外',
        tags: ['Hi-Res', 'MV'],
        singer: '曹杨Young',
        album: '天空之外',
        date: '2023-10-10',
        duration: '04:01'
      },
      {
        imgUrl: 'https://web-tilas4854.oss-cn-beijing.aliyuncs.com/ranking/16.png',
        songName: '冒险精神',
        tags: ['Hi-Res', 'MV'],
        singer: '毛不易',
        album: '冒险精神',
        date: '2023-10-10',
        duration: '04:39'
      }
    ]
  },
  {
    name: '华语',
    id: 1,
    tableData: [
      {
        imgUrl: 'https://web-tilas4854.oss-cn-beijing.aliyuncs.com/ranking/8.png',
        songName: '青春为名',
        tags: ['Hi-Res'],
        singer: '李宇春',
        album: '青春为名 下部曲 - 泪',
        date: '2023-10-10',
        duration: '04:01'
      },
      {
        imgUrl: 'https://web-tilas4854.oss-cn-beijing.aliyuncs.com/ranking/1.png',
        songName: '还有我疼你',
        tags: ['Hi-Res'],
        singer: '陆虎',
        album: '还有我疼你',
        date: '2023-10-10',
        duration: '03:51'
      },
      {
        imgUrl: 'https://web-tilas4854.oss-cn-beijing.aliyuncs.com/ranking/5.png',
        songName: '天空之外',
        tags: ['Hi-Res', 'MV'],
        singer: '曹杨Young',
        album: '天空之外',
        date: '2023-10-10',
        duration: '04:01'
      }
    ]
  },
  {
    name: '欧美',
    id: 2,
    tableData: [
      {
        imgUrl: 'https://web-tilas4854.oss-cn-beijing.aliyuncs.com/ranking/8.png',
        songName: '青春为名',
        tags: ['Hi-Res'],
        singer: '李宇春',
        album: '青春为名 下部曲 - 泪',
        date: '2023-10-10',
        duration: '04:01'
      },
      {
        imgUrl: 'https://web-tilas4854.oss-cn-beijing.aliyuncs.com/ranking/5.png',
        songName: '天空之外',
        tags: ['Hi-Res', 'MV'],
        singer: '曹杨Young',
        album: '天空之外',
        date: '2023-10-10',
        duration: '04:01'
      }
    ]
  },
  {
    name: '韩国',
    id: 3,
    tableData: [
      {
        imgUrl: 'https://web-tilas4854.oss-cn-beijing.aliyuncs.com/ranking/1.png',
        songName: '还有我疼你',
        tags: ['Hi-Res'],
        singer: '陆虎',
        album: '还有我疼你',
        date: '2023-10-10',
        duration: '03:51'
      },
      {
        imgUrl: 'https://web-tilas4854.oss-cn-beijing.aliyuncs.com/ranking/5.png',
        songName: '天空之外',
        tags: ['Hi-Res', 'MV'],
        singer: '曹杨Young',
        album: '天空之外',
        date: '2023-10-10',
        duration: '04:01'
      }
    ]
  },
  {
    name: '日本',
    id: 4,
    tableData: [
      {
        imgUrl: 'https://web-tilas4854.oss-cn-beijing.aliyuncs.com/ranking/8.png',
        songName: '青春为名',
        tags: ['Hi-Res'],
        singer: '李宇春',
        album: '青春为名 下部曲 - 泪',
        date: '2023-10-10',
        duration: '04:01'
      },
      {
        imgUrl: 'https://web-tilas4854.oss-cn-beijing.aliyuncs.com/ranking/5.png',
        songName: '天空之外',
        tags: ['Hi-Res', 'MV'],
        singer: '曹杨Young',
        album: '天空之外',
        date: '2023-10-10',
        duration: '04:01'
      }
    ]
  },
  {
    name: '小语种',
    id: 5,
    tableData: [
      {
        imgUrl: 'https://web-tilas4854.oss-cn-beijing.aliyuncs.com/ranking/8.png',
        songName: '青春为名',
        tags: ['Hi-Res'],
        singer: '李宇春',
        album: '青春为名 下部曲 - 泪',
        date: '2023-10-10',
        duration: '04:01'
      },
      {
        imgUrl: 'https://web-tilas4854.oss-cn-beijing.aliyuncs.com/ranking/5.png',
        songName: '天空之外',
        tags: ['Hi-Res', 'MV'],
        singer: '曹杨Young',
        album: '天空之外',
        date: '2023-10-10',
        duration: '04:01'
      },
      {
        imgUrl: 'https://web-tilas4854.oss-cn-beijing.aliyuncs.com/ranking/16.png',
        songName: '冒险精神',
        tags: ['Hi-Res', 'MV'],
        singer: '毛不易',
        album: '冒险精神',
        date: '2023-10-10',
        duration: '04:39'
      }
    ]
  }
])
// const tableData = [
//   {
//     imgUrl: 'https://web-tilas4854.oss-cn-beijing.aliyuncs.com/ranking/8.png',
//     songName: '青春为名',
//     tags: ['Hi-Res'],
//     singer: '李宇春',
//     album: '青春为名 下部曲 - 泪',
//     date: '2023-10-10',
//     duration: '04:01'
//   },
//   {
//     imgUrl: 'https://web-tilas4854.oss-cn-beijing.aliyuncs.com/ranking/1.png',
//     songName: '还有我疼你',
//     tags: ['Hi-Res'],
//     singer: '陆虎',
//     album: '还有我疼你',
//     date: '2023-10-10',
//     duration: '03:51'
//   },
//   {
//     imgUrl: 'https://web-tilas4854.oss-cn-beijing.aliyuncs.com/ranking/5.png',
//     songName: '天空之外',
//     tags: ['Hi-Res', 'MV'],
//     singer: '曹杨Young',
//     album: '天空之外',
//     date: '2023-10-10',
//     duration: '04:01'
//   },
//   {
//     imgUrl: 'https://web-tilas4854.oss-cn-beijing.aliyuncs.com/ranking/16.png',
//     songName: '冒险精神',
//     tags: ['Hi-Res', 'MV'],
//     singer: '毛不易',
//     album: '冒险精神',
//     date: '2023-10-10',
//     duration: '04:39'
//   }
// ]
const activeName = ref(0)

const handleClick = (tab, event) => {
  console.log(tab, event)
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__nav-wrap:after {
  content: '';
  border: none !important;
}

::v-deep .el-tabs__item.is-active,
.el-tabs__item:hover {
  font-size: 24px;
  font-weight: 550;
  color: #000;
}

::v-deep .cell {
  color: #cacac9;
  font-size: 18px;
}
</style>
